<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/in.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>修改手机号码</title>
    <link rel="stylesheet" href="${staticPage}/css/weui.css"/>
    <link rel="stylesheet" href="${staticPage}/css/modifyName.css"/>
    <!--<link rel="stylesheet" href="css/example.css"/>-->
</head>
<script type="text/javascript">


function showToast(){
	 $('#toast').show();
	   setTimeout(function () {
	       $('#toast').hide();
	       /* window.location.reload(); */
	       /* location.href="${ctx}/myInfo1.0.do"; */
   }, 2000);
}
function showToast1(){
	 $('#toast1').show();
		  setTimeout(function () {
		      $('#toast1').hide();
		      /* window.location.reload(); */
		      location.href="${ctx}/myInfo1.0.do";
  }, 2000);
}
	
	var countdown=60;
	function settime(val) { 
		if (countdown == 0) { 
			val.removeAttr("disabled");   
			val.css("background-color","#04BE02")
			val.val("获取短信验证码"); 
			countdown = 60; 
			return false;
		} else { 
			val.attr("disabled", "disabled"); 
			val.css("background-color","#979797")
			val.val(countdown + "秒");   
			countdown--; 
		} 
		setTimeout(function() { 
		settime(val) 
		},1000) 
	} 
	$(function(){
		
		var oldTel="${current_user.tel}";  //当前的手机号
		console.log("asdf"+oldTel);
		
	//获取验证码
	$("#getCode").click(function(){
		isGetCode=true;
		var num=$("input[name='tel']").val();
		console.log(num);
		if(num.length!=11){
			alert("请输入正确的手机号！");
		}
		else{
			$.getJSON("${ctx}/user_sendMessage.json",
					{tel:$("input[name='tel']").val()},
			function(json){
				if(json.success){
					showToast();
					settime($("#getCode"));
					/* $("input[name='sessionId']").val(json.sessionId); */
					/* $("#wxUserForm input[name='code']").val(json.code); */				
				}
				else{
					alert(json.msg);
					}
			})
		}
	})
	
	$("#modifyButton").click(function(){
	
		var code=$("input[name='code']").val();
		var tel=$("input[name='tel']").val();
		

				
		 if(code==""||code==null){
			alert("验证码不能为空！");
			}
		 else if(tel==""||tel==null){
			 alert("手机号码不能为空！");
		 }
		
		 else{
			$.getJSON("${ctx}/user_modifyInfo.json",
					{code:code,tel:tel},
			function(json){
				if(json.success){
					showToast1();
				}
				else{
					alert(json.msg);
					}
			})
		}
	
				 
	
	});
})		

</script>
<body>

    <!-- <div style="background-color: #ffffff;width: 80%;height: 40px;margin-left: 10%;margin-top: 20px;border: none">
      <input type="text" name="tel" style="background-color: #ffffff;width: 100%;height: 40px;border: none;font-size: 16px" placeholder="请输入手机号">

    </div> -->
    
    <div class="weui_cells weui_cell_form" style="margin-left:10%;margin-right:10%">
     <div class="weui_cell ">
            <div class="weui_cell_hd"><label for="" class="weui_label" style="width:75px !important"> 手机号</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" pattern="[0-9]*" type="text" name="tel"  placeholder="请输入手机号">
            </div>
        </div>
        
        <div class="weui_cell ">
            <div class="weui_cell_hd"><label for="" class="weui_label" style="width:75px !important"> 验证码</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" name="code"  placeholder="请输入验证码" pattern="[0-9]*">
            </div>
            <div class="weui-cell-ft" style="font-size:6px">
            	<div class="weui-btn-area" >
            	     <input  class="weui_btn  weui_cell_primary" id="getCode" type="button" value="获取验证码" style="padding-left:4px !important;padding-right:4px !important"> 
            	 </div>
            </div>
            
        </div>
        
      </div>
    
    
    <!-- <div style="width: 100%;height: 40px;margin-left: 10%;margin-top: 20px;border: none">
        <span>
            <input type="text" name="code" style="background-color: #ffffff;width:34%;height: 40px;border: none;font-size: 16px;margin-top: -4px" placeholder="请输入验证码">
        </span>
        



    </div> -->

    <div class="weui_btn_area submitButton">
        <a class="weui_btn weui_btn_primary"  id="modifyButton">保存</a>
    </div>
 <div id="toast" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">短信发送成功！</p>
            </div>
        </div>
        <div id="toast1" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">手机号绑定成功！</p>
            </div>
        </div>
     
</body>
</html>